<script setup lang="ts">
import { computed, ref } from 'vue';

const firstName = ref('John')
const lastName = ref('Doe')

// computed 只读写法 readonly
// const fullName = computed(() => {
//   return firstName.value + ' ' + lastName.value
// })

// computed 可读可写，传入 get set 对象形式
const fullName = computed({
  get() {
    // 获取 firstName 和 lastName，中间添加空格
    return firstName.value + ' ' + lastName.value
  },
  set(value) {
    // 把输入框的 value 按空格拆分成 firstName 和 lastName
    const names = value.split(' ')
    firstName.value = names[0]
    lastName.value = names[1]
  }
})
</script>


<template>
  <input type="text" v-model="firstName">
  <input type="text" v-model="lastName">
  <p>完整姓名</p>
  <input type="text" v-model="fullName">
</template>